<template>
  <div>
    <router-link
      :to="`/goods/merchant/${item.id}`"
      tag="div"
      v-for="item in list"
      :key="item.id"
      class="list flex j-between m-b-10 bg-white p-v-15 p-h-10"
    >
      <div class="w-25vw merchant-img w-full b-r-4 o-hidden">
        <img class="w-full" :src="item.agencyImage" :alt="item.name" />
      </div>
      <div class="flex-1 m-l-3vw">
        <div class="flex j-between p-b-3">
          <p>
            <span class="text-title fs-rem-14px v-a-top">
              {{item.name}}
              <van-tag type="danger" class="m-l-1vw fs-rem-12px">{{item.agencyType}}</van-tag>
            </span>
          </p>
          <p class="fs-rem-12px text-grey p-2">
            <span>{{item.distance > 1 ? item.distance : item.distance * 1000}}</span>
            <span>{{item.distance > 1 ? 'km' : 'm'}}</span>
          </p>
        </div>
        <p class="fs-rem-12px">
          <span class="text-red">{{item.agencyStar}}分</span>
          <span class="text-content">| {{item.address}}</span>
        </p>
        <p class="text-content fs-rem-12px p-v-3">营业时间: {{item.agencyOpeningHours}}</p>
        <p>
          <van-tag
            v-for="service in item.agencyService"
            :key="service"
            plain
            class="m-r-5 v-a-middle fs-rem-12px"
          >{{service}}</van-tag>
        </p>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      require: true,
      type: Array
    }
  }
}
</script>

<style lang="scss" scoped>
.merchant-img {
  align-self: flex-start;
}
</style>
